<template>
  <div :class="['nav', 'flex_row_sp', isFix && 'fix_top']" :style="{ background: bgColor }">
    <div class="left ml-[16px]">
      <img @click="goHome" class="icon2" :src="logo" alt="" />
    </div>
    <div class="right mr-[16px]">
      <div v-if="isLoggedIn">
        <img
          @click="showOption = true"
          v-if="!showOption"
          class="avatar"
          :src="userInfo?.avatar"
          alt="" />
        <img
          @click="showOption = false"
          v-else
          class="close_img"
          src="https://imgs.nexbie.com/uploads/e0493ec4ad19430aa809deb5b1f79390.webp"
          alt="" />
      </div>
      <div v-else @click="goLogin" :style="{ color: textColor }" class="no_login_text">
        Log in / Sign up
      </div>
    </div>
    <div v-if="showOption" class="option" @click="showOption = false">
      <div class="list_view">
        <div
          @click.stop="goPath(item)"
          v-for="(item, index) in list"
          :key="item.name"
          :class="index !== list.length - 1 && 'option_item_border'"
          class="option_item">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { showConfirmDialog } from 'vant';
  import { computed, ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/user';
  import { UserAPI } from '@/api/user';
  const router = useRouter();
  const route = useRoute();
  const userStore = useUserStore();
  const userInfo = computed(() => userStore.user);
  const isLoggedIn = computed(() => userStore.isAuthenticated);
  import { useLoginModal } from '@/composables/useLoginModal';

  const emit = defineEmits(['handleLogoFn']);
  const props = defineProps({
    isFix: { type: Boolean, default: true },
    bgColor: { type: String, default: '#fff' },
    logo: {
      type: String,
      default: 'https://imgs.nexbie.com/uploads/2e9c2bc766c44179a8fc5898f62acc22.png',
    },
    textColor: { type: String, default: '#222' },
    handleLogoFn: {
      type: Function,
      default: undefined, // 明确默认值，避免隐式undefined
    },
  });

  const showOption = ref<boolean>(false);

  const list = ref<any>([
    { name: 'About US', path: '/aboutUS' },
    { name: 'Terms and Conditions', path: '/terms' },
    { name: 'Privacy Policy', path: '/privacy' },
    { name: 'Nexbie Guidelines', path: '/guidelines' },
    { name: 'Cookie Policy', path: '/cookiePolicy' },
    { name: 'Log Out', type: 1 },
  ]);

  const goLogin = () => {
    const { showModal } = useLoginModal();
    showModal();
  };

  const goPath = (item: any) => {
    const { path, type } = item || {};
    if (type === 1) {
      showConfirmDialog({
        title: '',
        message: 'Confirm Log Out?',
        confirmButtonText: 'Log Out',
        cancelButtonText: 'No',
        confirmButtonColor: '#F76B1B',
      }).then(() => {
        handleLogout();
        showOption.value = false;
      });
      return;
    }
    router.push(path);
    showOption.value = false;
  };

  // 退出登录
  const handleLogout = async () => {
    console.log('退出登录');
    await UserAPI.logout();
    userStore.logout();
    router.push('/');
  };

  const goHome = () => {
    const hasCallback = typeof props.handleLogoFn === 'function';
    const { path } = route;
    if (hasCallback) {
      emit('handleLogoFn');
      return;
    }
    if (path === '/') {
      location.reload();
      return;
    }
    router.push('/');
  };
</script>

<style scoped lang="scss">
  .option {
    position: absolute;
    z-index: 99;
    top: 56px;
    width: 100vw;
    color: var(---9, #222);
    font-family: 'InterTight';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-top: 1px solid #e1e2e3;
    height: 100vh;
    background: #959595;
  }
  .list_view {
    background: #fff;
    padding: 0 16px;
  }
  .option_item {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .option_item_border {
    border-bottom: 1px solid #e1e2e3;
  }
  .close_img {
    width: 12px;
    height: 12px;
  }
  .flex_row_sp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .fix_top {
    position: fixed;
  }
  .nav {
    top: 0;
    z-index: 9;
    width: 100vw;
    display: flex;
    align-items: center;
    height: 56px;
    z-index: 999;
    .avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
    }
    .left {
      display: flex;
    }
    .right {
      display: flex;
    }
    .no_login_text {
      //color: var(---9, #222);
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .icon1 {
      width: 24px;
      height: 24px;
    }
    .icon2 {
      width: 91px;
      height: 24px;
    }
  }
</style>
